<template>
    <div class="enroll_cent">
        <solid-window class="window" :msg="enrollothermsg.warnmsg" ref="child"></solid-window>

        <!--      -------------------上侧--------图片显示区域-->

        <div class="enroll_inputmsg">

            <div>
                <div class="enroll_QQ changeline">
                    <label>账号名</label>
                    <!--                  竖线-->

                    <input class="input1"
                           type="text"
                           v-model="enroll.user"
                           placeholder="账户唯一，可以用来登录"
                           @focus.stop="showwarnmsg('enroll_user_warn',true,/*flagec*/)"
                           @blur.stop="showwarnmsg('enroll_user_warn',false/*,flagec*/)"
                           @input.stop="checkenrollmsg('enroll_user_warn')"
                    >
                </div>
                <!--              格式错误的提示-->
                <span class="enroll_user_warn">
                      <i class="enroll_img_w"></i>
                      {{this.userwarnmsg}}
                  </span>
            </div>

            <!--设置密码的地方-->
            <div>
                <div class="enroll_password changeline"
                     @mouseenter="emailmouse('paword')"
                     @mouseleave="emailleave('paword')">
                    <label>设置密码</label>

                    <input  class="input3"
                            type="text"
                            v-model="enroll.password"
                            placeholder="建议两张或两种以上的字符组合"
                            @focus.stop="showwarnmsg('enroll_pas_warn',true)"
                            @blur.stop="showwarnmsg('enroll_pas_warn',false)"
                            @input.stop="checkenrollmsg('enroll_pas_warn')"
                    >
                    <i class="enroll_img_i"
                       @click.stop="clearEmail()">
                    </i>

                </div>
                <span class="enroll_pas_warn">
                      <i class="enroll_img_g"></i>
                      {{this.pwdwarnmsg}}
                </span>
            </div>

<!--            &lt;!&ndash;设置密码的地方&ndash;&gt;-->
<!--            <div>-->
<!--                <div class="enroll_code changeline">-->
<!--                    <label>确认密码</label>-->

<!--                    <input  class="input3"-->
<!--                            type="text"-->
<!--                            v-model="enroll.expassword"-->
<!--                            placeholder="再次输入密码"-->
<!--                            @focus.stop="showwarnmsg('enroll_exec_warn',true,flagee)"-->
<!--                            @blur.stop="showwarnmsg('enroll_exec_warn',false,flagee)"-->
<!--                            @input.stop="checkenrollmsg('enroll_exec_warn')"-->
<!--                    >-->
<!--                    <i class="enroll_img_i"></i>-->
<!--                </div>-->
<!--                <span class="enroll_exec_warn">-->
<!--                       <i class="enroll_img_w"></i>-->
<!--                      {{this.execpwdwarnmsg}}-->
<!--                </span>-->
<!--            </div>-->



            <!--          邮箱输入的div容器-->
            <div>
                <div class="enroll_QQ changeline"
                     @mouseenter="emailmouse('QQ')"
                     @mouseleave="emailleave('QQ')">
                    <label>邮箱地址</label>
                    <!--                  竖线-->

                    <input class="input1"
                           type="text"
                           placeholder="建议使用常用的的邮箱地址"
                           v-model="enroll.email"
                           @focus.stop="showcannnel(1);showwarn('enroll_QQ_warn',true)"
                           @blur.stop="showcannnel(1);showwarn('enroll_QQ_warn',false)"
                           @input.stop="checkenrollmsg('enroll_QQ_warn')"
                    >

                    <i class="enroll_img_i"
                       @click.stop="clearEmail()">
                    </i>
                </div>
                <!--              格式错误的提示-->
                <span class="enroll_QQ_warn">
                      <i class="enroll_img_g"></i>
                      {{this.mailwarnmsg}}
                </span>
            </div>

            <!--          验证码的div容器-->
            <div>
                <div class="enroll_code changeline"
                     @mouseenter="emailmouse('code')"
                     @mouseleave="emailleave('code')">
                    <label>邮箱验证码</label>

                    <input  class="input2"
                            v-model="enroll.execode"
                            type="password"
                            placeholder="邮件验证码"
                    >
                    <button class="button_id" id="button_id" @click="checkEmail();showcannnel(0)">重新获取</button>
                </div>
                <span class="enroll_code_warn">
                       <i class="enroll_img_g enroll_img_w"></i>
                      {{this.codewarnmsg}}
                </span>
            </div>
            <div class="agreebox">
                <div class="sim_checkbox" @click.stop="checkbox('sim_checkbox')"></div>
                我已阅读并同意
                <a href="  https://transformers.jd.com/policies/#/registration_agreement  " target="_blank" clstag="h|keycount|biguser|protocol">《企业用户注册协议》</a>
                <a href=" https://transformers.jd.com/policies/#/privacy_policy " target="_blank">《企业用户隐私政策》</a>
            </div>
            <!--          提交按钮的容器-->
            <div class="clearfix">
                <div class="enroll_subimt">
                    <input id="myButton"  @click="mailgetcode()" type="submit" >
                </div>
                <a class="reg-other-person" href="/#/enrollview/cmail">
                    <i class="reg-ohter-icon"></i>
                    企业用户注册
                </a>
            </div>
        </div>
    </div>
</template>

<script>
import SolidWindow from "@/components/sub/SolidWindow.vue";
import {decryptDes, encryptDes} from "@/utill/des";

export default {
    name: "MailEnroll",
    components: {
        SolidWindow,


    },
    data(){
        return{
            isleave:true,
            enroll:{
                user:'',
                email:'',
                password:'',
                expassword:'',
                execode:''
            },
            enrollothermsg:{
                userwarn:'支持中文、英文、数字、“-”、“_”的组合',
                mailwarn:'验证完成后，可以用该邮箱进行登录或者找回密码',
                codewarn:'验证码已发送，120秒内输入有效',
                warnmsg:'验证码已发送，请注意查收',
                pwdwarn:'建议使用字母、数字和符号两种及以上的组合',
            },
            // 取消图片
            falge:true,
            // 复选框
            flages:false,
            // 按钮是否禁用
            flageg:false,
            //提交按钮的拦截
            flagem:false,

            // 检查账号名
            flagec:false,
            // 检查密码
            flageu:false,
            // 检查确认密码是否正确
            flagee:false,
            //循环红路灯
            flaged:true,

        }
    },
    methods: {

        checkbox(msg){
            if (this.flages==false){
                document.querySelector('.'+msg).style="background-position: -107px -156px;";
                this.flages=true;
            }else if(this.flages==true){
                document.querySelector('.'+msg).style="background-position: -107px -400px;";
                this.flages=false;
            }
        },
        showwarnmsg(msg,flage/*flages*/){
            // enroll_code_warn enroll_exec_warn enroll_QQ_warn
            // console.log('显示警告条'+msg+"是否"+flage+"错误"+flages);
            const warn='.'+msg
            if (flage==true){
                //console.log("获得焦点+显示+参数"+msg)
                document.querySelector(warn).querySelector('i').style='background-position: -0px -100px;';
                document.querySelector(warn).style="display: flex;";
                // if (flages==false){
                //     this. changered(msg);
                // }
            }else if (flage==false){
                document.querySelector(warn).style="display: none;";
            }else {
                //   console.log("确认信息参数错误");
            }
        },

        warnwindow(msg,warn){
           document.getElementById(msg).disabled=true;
            this.enrollothermsg.warnmsg=warn;
            this.$refs.child.Scribblewindow();
           document.getElementById(msg).disabled=false;
        },


//显示取消的按钮
        showcannnel(msg){
            if (msg==1){
                document.querySelector('.enroll_img_i').style="display: block;";
            }else if (msg==0){
                document.querySelector('.enroll_img_i').style="display: none;";
            }

        },

//获取验证码的倒计时
        changebuttonbackground(){
            this.isleave=false;
            //×图片隐藏

            // console.log("获取验证码的按钮方法开始"+this.isleave)
            // 获取验证码的按钮变色
            document.querySelector('.enroll_code')
                .querySelector('button').style=""+
                "background: #f4f5f6;" +
                "background: linear-gradient(to right,#FFFFFF,#F5F5F5,#DCDCDC);";

            document.querySelector('.input2').style="border-right-width: 0px;";

            let wait = 3;
            let that=this;
            let rong= document.querySelector(".button_id");
            let clearba= document.querySelector('.enroll_code').querySelector('button');
            let warnmsg=document.querySelector('.enroll_code_warn')

            const intervalId= setInterval(function refer() {
                if (rong==null||clearba==null||warnmsg==null){
                    clearInterval(intervalId);
                }
                if (wait > 0) {
                    rong.innerHTML =wait+"秒后重新获取";
                    wait--
                    // console.log("获取验证码的按钮方法的回调函数"+that.isleave)
                    // 验证码已发送，120秒内输入有效、、的显示
                    warnmsg.style="display: flex";
                } else {
                    rong.innerHTML ="重新获取";
                    // 样式的去除
                    clearba.style="";
                    // ---验证码已发送，120秒内输入有效---警告的隐藏
                    warnmsg.style="display: none;"
                    clearInterval(intervalId);
                    that.isleave=true;
                }
            }, 1000)

            // console.log("获取验证码的按钮方法结尾"+this.isleave)
        },

// 邮件悬浮触发事件
        showwarn(msg,flage){
            if(flage==true){
                //  验证完成后，可以用该邮箱进行登录或者找回密码
                document.querySelector('.'+msg).style="display: flex;";
            }else if(flage==false){
                document.querySelector('.'+msg).style="display: none;";
            }

        },

//使警告的颜色变换为灰色
        changegrey(codemsgs){
            // 警告的变换正常
            document.querySelector('.'+codemsgs)
                .querySelector('i').style='background-position: -0px -100px;';
            document.querySelector('.'+codemsgs).style="display: flex;color: #999;";
        },
//使警告的颜色变换为红色
        changered(codemsgs){
            // 警告的颜色变换
            document.querySelector('.'+codemsgs).style='display: flex;color: #f91;';
            document.querySelector('.'+codemsgs)
                .querySelector("i").style='background-position: -17px -100px;';
        },

//检查账户名的事假
        checkenrollmsg(codemsg){
            if (codemsg=='enroll_user_warn'){
                const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
                const msg=this.enroll.user
                if (reg.test(msg)){
                    //console.log("账户的名成格式+错误格式的数值="+msg)
                    // 变换灰色
                    this.changegrey(codemsg)
                    this.flagec=true;
                    this.enrollothermsg.userwarn='支持中文、英文、数字、“-”、“_”的组合';
                } else if (!reg.test(msg)){
                    //  console.log("账户的名成格式+错误格式的数值="+msg)
                    // 变换红色
                    this.changered(codemsg)
                    this.flagec=false;
                    this.enrollothermsg.userwarn='格式错误，仅支持汉字、字母、数字、“-”、“_”的组合'
                }else if (msg==''||msg==null){
                    //console.log("账户的名成格式+错误格式的数值="+msg)
                    // 变换红色
                    this.changered(codemsg)
                    this.flage=false;
                    this.enrollwarnmsg.userwarn='为空错误，仅支持汉字、字母、数字、“-”、“_”的组合'
                }
                //密码
            }else if(codemsg=='enroll_pas_warn'){
                const regs = /^(?![a-zA-Z]+$)(?!\d+$)(?![^\da-zA-Z\s]+$).{1,9}$/;
                const msgs=this.enroll.password;
                if (msgs==''||msgs==null){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换灰色
                    this.changegrey(codemsg)
                    this.flageu=false;
                    document.querySelectorAll('.enroll_img_i')[0].style="display: none";
                    this.enrollwarnmsg.pwdwarn='格式错误，建议使用两种或两种以上字符组合';
                } else if (!regs.test(msgs)){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换红色
                    this.changered(codemsg)
                    this.flageu=false;
                    document.querySelectorAll('.enroll_img_i')[0].style="display: none";
                    this.enrollwarnmsg.pwdwarn='格式错误，建议使用两种或两种以上字符组合'
                }else if (regs.test(msgs)){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换灰色
                    this.changegrey(codemsg)
                    this.flageu=true;
                    document.querySelectorAll('.enroll_img_i')[0].style="display: block";
                    this.enrollwarnmsg.pwdwarn='建议使用字母、数字和符号两种及以上的组合，8-20个字符';
                }
                //邮箱账户确认
            }

        },


//光标进入时的样式变化
        emailmouse(conde){
            // console.log("进入验证码按钮的方法"+this.isleave)
            if(this.isleave){
                const QQline="" +
                    "border-color: rgb(153, 153, 153);" +
                    "border-style: solid;" +
                    "border-width: 1px;";
                const inputline="" +
                    "border-color: rgb(153, 153, 153);" +
                    "border-style: solid;" +
                    "border-width: 0px;";
                if (conde=='QQ'){
                    document.querySelector('.enroll_QQ').style=QQline;
                    document.querySelector('.input1').style=inputline+"border-left-width: 1px;";
                }else if (conde=='code'){
                    document.querySelector('.enroll_code').style=QQline;
                    document.querySelector('.input2').style=inputline+"border-left-width: 0px;border-right-width: 1px;";
                }else if (conde=='paword'){
                    document.querySelector('.enroll_password').style=QQline;
                    document.querySelector('.input3').style=inputline+"border-left-width: 0px;border-right-width: 0px;";
                }
            }
        },
//光标离开的样式变化
        emailleave(conde){
            // console.log("离开验证码按钮的方法"+this.isleave)
            if (this.isleave==true){
                const QQline="" +
                    "border-color: rgb(221, 221, 221);" +
                    "border-style: solid;" +
                    "border-width: 1px;";
                const inputline="" +
                    "border-color: rgb(221, 221, 221);" +
                    "border-style: solid;" +
                    "border-width: 0px;" +
                    "border-left-width: 1px;";
                if (conde=='QQ'){
                    document.querySelector('.enroll_QQ').style=QQline;
                    document.querySelector('.input1').style=inputline+"border-left-width: 1px;";
                }else if (conde=='code'){
                    document.querySelector('.enroll_code').style=QQline;
                    document.querySelector('.input2').style=inputline+"border-left-width: 0px;border-right-width: 1px;";
                }else if (conde=='paword'){
                    document.querySelector('.enroll_password').style=QQline;
                    document.querySelector('.input3').style=inputline+"border-left-width: 0px;border-right-width: 0px;";
                }
            }
        },
//检查邮件
        async checkEmail(){
            console.log("djlsjdlkfsjldkjflskjfljslfjdskl")
            const emailmsg=this.enroll.email;
            document.querySelector('.enroll_QQ_warn').style="display: flex;";
            if (emailmsg==null||emailmsg==''){
                // alert('请输入邮箱地址')
                this.enrollothermsg.mailwarn='请输入邮箱地址'
                // console.log("邮箱的地址为空")

            }else {

                var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
                if (!reg.test(emailmsg)){
                    // console.log("验证邮箱的格式+错误格式的数值"+emailmsg)
                    this.changered('enroll_QQ_warn')
                    this.enrollothermsg.mailwarn='格式错误'
                }else {
                    // ！！！！颜色变换！！！！
                    this.changebuttonbackground();

                    // !!!!!弹窗显示！！！！！
                    this.warnwindow("button_id","验证码已发送，请注意查收")

                    document.querySelector('.enroll_QQ_warn').style="display: none;";

        //???请求后端获取验证码???????未完成
                    let res = await this.$http.post("mailcode", this.enroll.email);

                    console.log("收到的状态码"+res.code);
                    //对有没有获取到验证码为条件进行拦截
                    this.flagem=false;

                    if(res.code==200){
                        // 对获取到的验证码进行加码
                        const encrypts = encryptDes(JSON.stringify(res.data.code),this.$store.state.EBC);
                        this.enroll.code=encrypts;
                        //对有没有获取到验证码为条件的开放\

                        this.flagem=true;
                        // 成功的话讲获取到额验证码保存到execode中去
                        // this.$store.commit("sendtoken", res.data.token);
                        // this.$store.commit("saveuser",this.enroll.email)
                    }else if(res.code==403){
                        this.$router.push('/enrollview/msg');

                    }
                }
            }
        },
// //??????????获取是否验证码是否正确?????????未完成
        // 登录的功能实现
        mailgetcode() {
            //  对是否接收到验证码
            if (this.flagem==true){
                // 对协议是否同意
                if (this.flages==true){
                    let dess = JSON.parse(decryptDes(this.enroll.code,this.$store.state.EBC));
                    // 将获得的验证码和填入的进行比较对的话进行下一步错去的的显示
                    if(dess==this.enroll.execode){
                        // 成功
                        this.$router.push({path:'/enrollview/msg', query:{email:this.enroll.email}})
                    }else {
                        this.warnwindow("myButton",'输入验证码错误');
                    }
                }else {
                    this.warnwindow("myButton",'请同意该协议');
                }
            }else {
                this.warnwindow("myButton",'请完成验证码的相关操作')
            }
        },
//清除邮件地址
        clearEmail(){
            // console.log("之前的数值")
            // console.log(this.enroll.email)
            this.enroll.email='';
            document.querySelector('.enroll_QQ_warn').style="" +
                "display: none;";
        },
    },
    computed:{
        mailwarnmsg:function (){
            return this.enrollothermsg.mailwarn;
        },
        codewarnmsg:function (){
            return this.enrollothermsg.codewarn;
        },
        isleavef:function () {
            return this.isleave;
        },
        pwdwarnmsg:function () {
            return this.enrollothermsg.pwdwarn;
        },
        userwarnmsg:function () {
          return this.enrollothermsg.userwarn;
        }
    },
    created() {

    },
    mounted() {
        // ------当前的样式-----------//
        // document.querySelectorAll('.enroll_two')[0]
        //     .querySelector('span').style="background-position: 0 -200px;" +
        //     "color: #fff";
        // document.querySelectorAll('.enroll_two')[0]
        //     .querySelector('p').style=" color: #3b4";
        // // ------当前的样式-----------//
        // document.querySelectorAll('.enroll_dots')[0].style='background-position: 0 -100px;';
    },
    watch: {

    },
}
</script>

<style scoped>
.enroll_cent{
    width: 1260px;
    height: auto;
    min-height: 507px;
    /*居中设置*/
    margin: auto;
}
/*----------上侧的图片位置 最大容器--------*/
.enroll_cent .enroll_img {
    margin: auto;
    width: 450px;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*图片和文字的容器*/
.enroll_cent .enroll_img .enroll_two{
    margin: auto;
    width: auto;
    height: 55px;
    /*文字顔色*/
    color: #fff;
}
/*()*/
/*灰色*/
/*color: #ccc;*/
/*background-position: -45px -200px;*/
/*绿色*/
/*background-position: 0 -200px;*/
/*color: #fff;*/
.enroll_img .enroll_two span{
    display: block;
    width: 24px;
    height: 24px;
    background: url('@/assets/bckground/reg-icon.png') no-repeat;
    /*!*绿色*!*/
    /*color: #ffffff;*/
    /*background-position: 0 -200px;*/

    /*灰色*/
    background-position: -45px -200px;
    color: #ccc;

    line-height: 24px;
    font-size: 12px;
    font-weight: 700;

    margin: auto;
}
.enroll_img .enroll_two p{
    width: auto;
    color: #999999;
    font-size: 12px;
}
/*。。。。。。。。。。。。。*/
.enroll_cent .enroll_img .enroll_dots{
    width: 124px;
    height: 10px;
    background: url('@/assets/bckground/reg-icon.png') no-repeat;
    background-position: 0 -100px;
}

/*---------中下侧------------注册的信息------*/
.enroll_cent .enroll_inputmsg{
    width: 400px;
    height: auto;

    margin: auto;
    display: inline-block;
}
/*---------每一个的输入邮箱和验证码的外部div容器--*/
.enroll_cent .enroll_inputmsg div{
    width: 400px;
    height: 86px;
    margin-top: 20px;
    /*background-color: chartreuse;*/
}

.enroll_cent .enroll_inputmsg div div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: auto;
    height: 52px;
    /*overflow: hidden;*/

    /*边框的线条*/
    border-color: rgb(221, 221, 221);
    border-style: solid;
    border-width: 1px;
}

/*-----提示信息-----------*/
.enroll_cent .enroll_inputmsg div label{
    width: 108px;
    font-size: 15px;
    color: #666;
}
/*输入框*/

.enroll_cent .enroll_inputmsg div input{
    width: 174px;
    height: 95%;
    color: rgb(72, 67, 67);

    /*输入框的左侧竖线   |   */
    border-color: rgb(221, 221, 221);
    /*border-color: darkorchid;*/
    border-style: solid;
    border-width: 0px;
    border-left-width: 0px;
    border-right-width: 1px;
    outline: none;
}
.enroll_cent .enroll_inputmsg div .input1{
    width: 174px;
    height: 95%;
    color: rgb(72, 67, 67);

    /*输入框的左侧竖线   |   */
    border-color: rgb(221, 221, 221);
    /*border-color: darkorchid;*/
    border-style: solid;
    border-width: 0px;
    border-left-width: 1px;
    border-right-width: 0px;
    outline: none;
}
.enroll_cent .enroll_inputmsg div input3{
    width: 174px;
    height: 95%;
    color: rgb(72, 67, 67);

    /*输入框的左侧竖线   |   */
    border-color: rgb(221, 221, 221);
    /*border-color: darkorchid;*/

    outline: none;
}

.enroll_cent .enroll_inputmsg .enroll_QQ .enroll_img_i{
    position: relative;
    float: right;
    right: -82px;
    display: none;
    width: 12px;
    height: 12px;
    background: url('@/assets/bckground/reg-icon.png') no-repeat;
    background-position: -80px -160px;
    /*background-color: blue;*/
}

.enroll_cent .enroll_inputmsg span{
    display: flex;
    justify-content: flex-start;
}

/*警告图片*/
.enroll_cent .enroll_inputmsg span .enroll_img_g{
    display: block;
    width: 16px;
    height: 16px;
    background-position: -0px -100px;
    background-image: url("@/assets/icon/icon.png");
}
.enroll_cent .enroll_inputmsg span .enroll_img_w{
    display: block;
    width: 16px;
    height: 16px;

    background-position: -0px -100px;
    background-image: url("@/assets/icon/icon.png");
}

/*支持中文、英文、数字、“-”、“_”的组合*/
.enroll_cent .enroll_inputmsg div .enroll_user_warn{
    color: #999;
    font-size: 12px;
    display: none;
}
/*格式错误/验证完成后，可以用该邮箱进行登录或者找回密码*/
.enroll_cent .enroll_inputmsg div .enroll_QQ_warn{
    color: #999;
    font-size: 12px;
    display: none;
}
/*格式错误/验证完成后，可以用该邮箱进行登录或者找回密码*/
.enroll_cent .enroll_inputmsg div .enroll_pas_warn{
    color: #999;
    font-size: 12px;
    display: none;
}

/*验证码已发送，120秒内输入有效*/
.enroll_cent .enroll_inputmsg div .enroll_code_warn{
    color: #999;
    font-size: 12px;
    display: none;
}
.enroll_cent .enroll_inputmsg div div button{
    all: unset;
    width: 118px;
    height: 52px;
    border: 0px;
    cursor: pointer;
    font-size: 14px;
    font-family: '\5b8b\4f53';
}
/*--------提交--button--*/
.enroll_cent .enroll_inputmsg .enroll_subimt input{
    color: #fff;
    background-color: #e2231a;
    width: 100%;
    cursor: pointer;
}
.enroll_cent .enroll_inputmsg .enroll_subimt{
    border-width: 0px;
    outline: none;
}

/*------企业用户登录------*/
.reg-other-person{
    margin-top: 25px;
    float: left;
}

.reg-other-person .reg-ohter-icon{
    display: inline-block;
    margin: 0 8px 2px 0;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    background: url('@/assets/bckground/reg-icon.png') no-repeat;
    background-position: 0 -160px;
}

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*我已阅读并同意的容器*/
.enroll_cent .enroll_inputmsg .agreebox{
    width: auto;
    min-width: 480px;
    height: 0px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;

}
/*我已阅读并同意*/
.enroll_cent .enroll_inputmsg div .sim_checkbox{
    background-image: url("@/assets/bckground/reg-icon.png");
    background-position: -0px -400px;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    z-index: 5;
}
/*验证码已发送弹窗*/
::v-deep #after{
    width: 232px;
    height: 46px;
    border-radius: 12px 12px 12px 12px;
    font-size: 13px;
    background-color: springgreen;
    color: #046e15;
    font-family: Arial;
}
</style>